<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝轮播图</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    li{
      list-style: none;
    }
    a{
      text-decoration: none;
    }
    .box{
      width: 520px;
      height: 280px;
      margin: 100px auto;
      background-color: #b3d4fc;
      position: relative;
    }
    .box img{
      width: 520px;
      height: 280px;
    }
    .prev,.next{
      position: absolute;
      top:50%;
      margin-top: -15px;
      width: 20px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background: rgba(0,0,0,0.3);
    }
    .prev{
      left:0;
      border-top-right-radius: 13px;
      border-bottom-right-radius:13px;
    }
    .next{
      right:0;
      border-top-left-radius: 13px;
      border-bottom-left-radius:13px;
    }
    .promonav{
      width: 70px;
      height: 13px;
      background: rgba(255,255,255,0.3);
      position: absolute;
      left: 50%;
      margin-left: -35px;
      bottom: 10px;
      border-radius: 13px;
    }
    .promonav li{
      width: 8px;
      height: 8px;
      float: left;
      background-color: #FFFFFF;
      border-radius: 50%;
      margin: 3px;
    }
    .promonav .selected{
      background-color: #ff8500;
    }
  </style>
</head>
<body>
<div class="box">
<img src="../img/tbpromo.jpg">
  <div class="prev"><a href="">&lt</a></div>
  <div class="next"><a href="">&gt</a></div>
  <ul class="promonav">
    <li class="selected"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
</body>
</html>
